﻿<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="../Comm/fonts/font-icons.min.css" rel="stylesheet" />
    <title>正在加载请稍候...</title>

    <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <!--表单样式-->
    <link href="../Admin/CSS/FoolFrmBody.css" rel="stylesheet" />
    <link href="../../DataUser/Style/FoolFrmStyle/Default.css" rel="stylesheet" />
    <!-- layui -->
    <link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
    <link href="../Scripts/layui/layui/css/autocomplete.css" rel="stylesheet" />
    <script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <script src="../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-form.js" type="text/javascript"></script>
    <!--通用的JS-->
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="./JS/tinymce/tinymce.min.js"></script>
    <script src="JS/jquery.mousewheel.min.js"></script>
    <script src="ChapterFrmGener.js"></script>
    <script src="../Scripts/Tools/jsPdf.debug.js"></script>
    <script src="../Scripts/Tools/html2canvas.js"></script>
    <script src="../../WF/CCForm/FrmFool.js"></script>
    <script src="../../WF/CCForm/FrmEnd.js"></script>
    <script src="../Comm/JScript.js"></script>
    <script src="../Scripts/layui/treeTable.js"></script>
    <script language="javascript" type="text/javascript">
        var frmID = null;
        var oid = null;
        var treeList = [];
        var groupFields = null;
        var attrs = null;
        var hideGroup;
        var hideAttrs;
        var hideGroupRes = [];
        var hideAttrRes = [];
        var table;
        layui.use(['tree', 'jquery', 'laypage', 'form', 'treeTable', 'table', 'layer'], function () {
            var treeTable = layui.treeTable, form = layui.form;
            //页面启动函数.
            $(function () {
                frmID = GetQueryString("FrmID");
                oid = GetQueryString("OID");

                var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddPara("FrmID", frmID);
                handler.AddPara("OID", oid);
                var data = handler.DoMethodReturnJSON("ChapterFrm_Init");
                console.log("获取的表单数据：", data)

                groupFields = data["GroupFields"];//章节
                attrs = data["Sys_MapAttr"];//字段

                var en = new Entity(frmID, oid);
                console.log("获取的表单设置信息：", en);
                //存储显示状态
                hideGroup = en.GetPara("HideGroup");
                if (hideGroup == undefined || hideGroup == null || hideGroup == '')
                    hideGroup = [];
                else hideGroup = hideGroup.split(',');
                hideAttrs = en.GetPara("HideAttrs");
                if (hideAttrs == undefined || hideAttrs == null || hideAttrs == '')
                    hideAttrs = [];
                else hideAttrs = hideAttrs.split(',');
                hideAttrRes = hideAttrs;
                hideGroupRes = hideGroup;
                console.log(hideAttrRes, hideGroupRes);

                //形成树形数据
                groupFields.forEach((item) => {
                    if (item.ParentOID === "" || item.ParentOID == null) {
                        var child = {
                            id: item.OID.toString(),
                            title: item.Lab,
                            children: [],
                            parentId: "0",
                            treeType:'field',//章节
                            IsShow: hideOrShow(item.OID.toString(), "field"),//判断是否显示
                            ...item,
                        };
                        child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
                        treeList.push(child);
                    }
                });
                console.log(treeList);
                //渲染表格
                tableRender();
                table.expandAll();
                //渲染表格方法
                function tableRender() {
                    table = treeTable.render({
                        elem: '#menu',//容器的id
                        data: treeList,//数据源
                        //toolbar: 'default',
                        //height: 'full-200',
                        //数据源是列表也行，根据parentId构造树形结构；是树形的也可以，根children构造树形结构
                        tree: {
                            treeSpid: '0',		//最上级的父级id
                            iconIndex: 1,//展开符号在哪一列
                            isPidData: true,//根据parentId来构造树形结构
                            idName: 'id',//父ID
                            pidName: 'parentId',//子ID
                            openName: 'open',// 是否默认展开的字段名
                        },
                        defaultToolbar: ['filter', 'print', 'exports'],//右上角
                        cols: [[
                            { type: 'numbers', fixed: 'left' }//复选，单选
                            , { field: 'title', title: '名称' }
                            , {
                                field: 'CtrlType', title: '内容类型', align: 'center', templet: function (record) {
                                    //自定义渲染
                                    return '<span>' + getCtrlTypeText(record.CtrlType) + '</span>';
                                }
                            }
                            , { field: 'IsShow', title: '打开为显示/关闭为隐藏',templet: '#switchTpl', unresize: true, align: 'center' }
                            //, { toolbar: '#menusState', width: 200, align: 'center', title: '操作' }
                        ]],
                        style: 'margin-top:0;'
                    });
                }

                // 全部展开
                $('#btnExpandAll').click(function () {
                    table.expandAll();
                });

                // 全部折叠
                $('#btnFoldAll').click(function () {
                    table.foldAll();
                });

                //保存测试使用
                $('#SaveBtn').click(function () {
                    Save();
                });

                //监听显示状态操作
                form.on('radio(hideOrShow)', function (data) {
                    var id = data.value.split('+')[0];//节点id
                    var isChecked = data.value.split('+')[1] === "true" ? true : false;//节点显示或者隐藏
                    
                    EachList(id, treeList, isChecked);
                    // 获取垂直滚动条的位置
                    var scrollTopPosition = $(window).scrollTop();

                    // 获取水平滚动条的位置
                    var scrollLeftPosition = $(window).scrollLeft();
                    table.expandAll
                    tableRender();
                    //table.expand(id, true);//刷新表格后展开当前行
                    table.expandAll();
                    // 调整滚动条的垂直位置
                    $(window).scrollTop(scrollTopPosition);

                    // 调整滚动条的水平位置
                    $(window).scrollLeft(scrollLeftPosition);

                });

                
            });
            //递归寻找当前节点(显示隐藏状态改变的当前节点),参数：要寻找的id，要遍历的列表,要改变的状态
            function EachList(id, list, isShow) {
                $(list).each(function (i, item) {
                    if (item.id === id) {
                        item.IsShow = isShow;
                        changeRes(item.id, isShow, item.treeType);//改变结果数组
                        if (item.children && item.children.length > 0 && isShow === false) {
                            //当本节点的状态变为隐藏，递归改变本节点的子节点状态
                            EachChildern(item.children, isShow);
                            return;
                        }
                        else if (isShow === true) {
                            //当本节点的状态变为显示，递归改变本节点的父节点状态
                            EachParent(id, treeList, isShow);
                            return;
                        }
                    }
                    if (item.children && item.children.length > 0) {
                        EachList(id, item.children, isShow)
                    };
                });
            };

            //递归遍历treeList改变表格的状态,如果父亲变为隐藏，则他的后代都变为隐藏；如果父亲变为显示，他的后代状态不变
            function EachChildern(data, isShow) {
                $(data).each(function (i, item) {
                    if (!isShow) {
                        item.IsShow = isShow;
                        changeRes(item.id, isShow, item.treeType);//改变结果数组
                    }

                    if (Array.isArray(item.children)&&item.children.length > 0) {
                        EachChildern(item.children, isShow);
                    }
                    if (item.children == undefined)
                        return true;
                })
            }

            //递归改变父级的状态，如果某一个节点是显示状态，则他的父辈也是显示状态
            function EachParent(id, list, isShow) {
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    if (item.id == id) {
                        item.IsShow = isShow;
                        return "FindChild";
                    };
                    if (item.children && item.children.length > 0) {
                        var findChild = EachParent(id, item.children, isShow);
                        if (findChild == "FindChild") {
                            item.IsShow = isShow;
                            changeRes(item.id, isShow, item.treeType);//改变结果数组
                            return "FindChild";
                        }
                    }
                }
                return "NotChild";
            };

            //改变显示结果数组hideGroupRes和hideAttrRes
            function changeRes(id, isShow, treeType) {
                if (isShow) {//如果是显示状态,从hide结果数组中去掉这一个
                    if (treeType == "attr") {//attr是字段
                        hideAttrRes = hideAttrRes.filter((item) => item != id)
                    } else {
                        hideGroupRes = hideGroupRes.filter((item) => item != id);
                    }
                } else {//如果是隐藏状态，往hide结果数组中加入这个id
                    if (treeType == "attr") {//attr是字段
                        if (hideAttrRes.indexOf(id) == -1)
                            hideAttrRes.push(id);
                    } else {
                        if (hideGroupRes.indexOf(id) == -1)
                            hideGroupRes.push(id);
                    }
                }
            };

            // 保存，测试使用，保存方法在父级
            function Save() {
                console.log(hideGroupRes.join(','), hideAttrRes.join(','));
                return;
                var en = new Entity(frmID, oid);
                //if (hideGroupRes.length != 0 )
                    en.SetPara("HideGroup", '');
                //if (hideAttrRes.length != 0)
                    en.SetPara("HideAttrs", '');
                en.Update();
            }
        })
        //递归构造章节树形结构(获取parentId的孩子)
        function getChildren(parentId) {
            var children = [];
            groupFields.forEach((item) => {
                if (item.ParentOID === parentId) {
                    var child = {
                        id: item.OID.toString(),
                        title: item.Lab,
                        children: [],
                        parentId: parentId.toString(),
                        treeType:'field',
                        IsShow: hideOrShow(item.OID.toString(), "field"),//判断是否显示
                        ...item,
                    };
                    child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
                    children.push(child);
                }
            });
            return children;
        }
        //获取本章节下的attr字段(groupId下的字段)
        function getAttrChildren(groupId, ctrlType) {
            var attrList = [];
            //非Attr型控件，非默认控件，不显示其下字段
            if (ctrlType != "Attr" && ctrlType != "" && ctrlType != null)
                return [];

            attrs.forEach((item) => {
                if (item.GroupID === groupId && item.UIVisible === 1) {//只显示可见的字段
                    var attr = {
                        id: item.KeyOfEn,
                        title: item.Name,
                        parentId: groupId.toString(),
                        treeType:'attr',//字段
                        IsShow: hideOrShow(item.KeyOfEn, "attr"),//判断是否显示
                        ...item,
                    }
                    if ((ctrlType === "" || ctrlType == null) && attr.TextModel != 1) {//默认型控件，只显示文本字段
                        if (attr.MyDataType == 1 && attr.UIContralType == 0) {
                            //if (attr.IsShow) hideAttrRes.push(attr.id);
                            attrList.push(attr);
                        };

                    } else if (ctrlType === "Attr") {//Attr控件所有类型的字段都显示
                        //if (attr.IsShow) hideAttrRes.push(attr.id);
                        attrList.push(attr);
                    };
                };
            });
            return attrList;
        }

        //获取控件类型的文本 "Dtl":从表；"Ath":附件；"":目录；"Attr":目录；"Dir":目录；
        function getCtrlTypeText(ctrlType) {
            switch (ctrlType) {
                case "Attr":
                case "":
                case "Dir":
                case null:
                    return "目录";
                case "Dtl":
                    return "从表";
                case "Ath":
                    return "附件";
                case "ChapterFrmSelfUrl":
                    return "自定义Url";
                case "ChapterFrmLinkFrm":
                    return "自定义表单";
                case undefined:
                    return "字段";
            };
        }

        //判断这一个章节或字段是否显示
        function hideOrShow(key, fieldOrAttr) {
            if (fieldOrAttr == "field") {
                return hideGroup.indexOf(key) > -1 ? false : true;
            } else if (fieldOrAttr == "attr") {
                return hideAttrs.indexOf(key) > -1 ? false : true;
            };
        }
       
    </script>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <!--搜索栏-->
                        <!--<div class="demoTable">
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="UserName" id="demoReload" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block" id="demoTable">
                                <button class="layui-btn" id="search" data-type="reload" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </div>-->
                    </div>

                    <div class="layui-card-header">
                        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe668;</i>展开全部
                        </button>
                        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe66b;</i>折叠全部
                        </button>
                        <!--保存按钮，测试使用-->
                        <!--<button class="layui-btn" id="SaveBtn">保存</button>-->
                    </div>

                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-hide" id="menu" lay-filter="menu"></table>
                    </div>

                    <script type="text/html" id="switchTpl">
                        <input type="radio"  value="{{d.id}}+{{true}}+{{d.treeType}}" title="显示" {{ d.IsShow == true ? "checked" : "" }} lay-filter="hideOrShow">
                        <input type="radio"  value="{{d.id}}+{{false}}+{{d.treeType}}" title="隐藏" {{ d.IsShow == false ? "checked" : "" }} lay-filter="hideOrShow">
                    </script>

                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="menusState">
        <a class="layui-btn layui-btn-xs" lay-event="up" style="width:auto"><i class="layui-icon">&#xe619;</i>上移</a>
        <a class="layui-btn layui-btn-xs" lay-event="down" style="width:auto"><i class="layui-icon">&#xe61a;</i>下移</a>
    </script>

</body>

</html>
